<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>let and const</title>
    <script src="./vue.global.js"></script>
    <style>
        .demo {
            font-family: sans-serif;
            border: 1px solid #eee;
            border-radius: 2px;
            padding: 20px 30px;
            margin-top: 1em;
            margin-bottom: 40px;
            user-select: none;
            overflow-x: auto;
        }
    </style>
</head>
<body>

    <div id="todo-list-app" class="demo">
        <ol>
            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>


    <script>

        const TodoList= {
            data() {
                return {
                    groceryList:[
                        {id:0,text:'Vegetables'},
                        {id:1,text:'Cheese'},
                        {id:2,text:'Whatever else humas are supposed to eat'},
                    ]
                }
            }
        };
        //创建应用
        const app =Vue.createApp(TodoList);
        //定义名为todo-item的新组件
        app.component('todo-item',{
            props:['todo'],
            template: `<li>{{ todo.text }}</li>`
        });
        //挂载应用
        app.mount('#todo-list-app');



    </script>
</body>
</html>